<template>
  <div class="container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- input表单 -->
        <el-form class="el_form_data">
          <!-- 搜索框 -->
          <el-form-item label="学科名称">
            <el-input class="Contents-input" v-model="querInfo.subjectName"></el-input>
            <el-button size="small" class="Contents-input-button" @click="subjects_clear">清除</el-button>
            <el-button type="primary" size="small" @click="subjects_search">搜索</el-button>
            <!-- 新增学科按钮 -->
            <el-button type="success" class="Contents-button" size="mini" @click="dialogVisible = true" icon="el-icon-edit">新增学科</el-button>
          </el-form-item>
        </el-form>
        <!-- 提示多少条数据 -->
        <el-alert :title="`共有${counts}条数据`" type="info" show-icon :closable="false"></el-alert>
        <!-- 页面展示数据 -->
        <el-table :data="dataList" stripe style="width: 100%">
          <el-table-column prop="id" label="序号"></el-table-column>
          <el-table-column prop="subjectName" label="学科名称"></el-table-column>
          <el-table-column prop="username" label="创建者"></el-table-column>
          <el-table-column label="创建日期" width="200">
            <template slot-scope="scoped">{{ scoped.row.addDate | parseTimeByString }} </template>
          </el-table-column>
          <el-table-column label="前台是否显示" prop="isFrontDisplay">
            <template slot-scope="scoped">{{ scoped.row.isFrontDisplay === 1 ? '是' : '否' }} </template>
          </el-table-column>
          <el-table-column prop="twoLevelDirectory" label="二级目录"></el-table-column>
          <el-table-column prop="tags" label="标签"></el-table-column>
          <el-table-column prop="totals" label="题目数量"></el-table-column>
          <el-table-column label="操作" class="subjects_operation" width="250">
            <template slot-scope="scope">
              <el-button type="text" @click="onClassify(scope.row)">学科分类</el-button>
              <el-button type="text" @click="ontag(scope.row)">学科标签</el-button>
              <el-button type="text" @click="subjectsAmend(scope.row)">修改</el-button>
              <!-- subjectsAmend(scope.row.id), -->
              <el-button type="text" @click="open(scope.row)" confirmButtonClass>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="querInfo.page"
          :page-sizes="[5, 12, 15]"
          :page-size="querInfo.pagesize"
          layout=" prev,pager,next,sizes,jumper"
          :total="counts"
        ></el-pagination>
        <!-- 新增学科弹框 -->
        <el-dialog title="新增学科" :visible.sync="dialogVisible" width="400px">
          <!-- input表单 -->
          <el-form :rules="rules" :model="ruleForm">
            <el-form-item label="学科名称" prop="name">
              <el-input placeholder="请输入学科名称" class="add-subjects-input" v-model="ruleForm.name" maxlength="5"></el-input>
            </el-form-item>
          </el-form>
          <div>
            <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" inactive-text="是否显示"></el-switch>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="add_subjects">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 修改用户弹框 -->
        <el-dialog title="修改学科" :visible.sync="amendSubjects" width="400px">
          <!-- input表单 -->
          <el-form>
            <el-form-item label="学科名称">
              <el-input class="add-subjects-input" v-model="aa.subjectName"></el-input>
            </el-form-item>
          </el-form>
          <div>
            <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" inactive-text="是否显示"></el-switch>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="amendSubjects = false">取 消</el-button>
            <el-button type="primary" @click="amend_data">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
// 导入学科列表
import { list, add, update, remove } from '@/api/hmmm/subjects.js'
export default {
  name: 'subjects',
  components: {},
  props: {},
  data() {
    return {
      // 表单验证
      ruleForm: {
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入学科名称', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ]
      },
      dialogVisible: false, // 创建学科的弹框显示状态
      value: true, // 是否显示
      // 请求列表携带参数
      querInfo: {
        page: 1, // 当前页数
        pagesize: 5, // 页尺寸
        subjectName: '' // 学科名称
      },
      counts: 0, // 显示多少条数据
      dataList: [], // 渲染页面的数据
      aa: {},
      amendSubjects: false // 修改学科弹框的显示状态
    }
  },
  computed: {},
  watch: {},
  // 生命周期函数
  created() {
    // 学科列表
    this.subject_list()
  },
  mounted() {},
  // 执行方法
  methods: {
    // 请求数据 渲染页面
    async subject_list() {
      // 请求学科列表
      const { data } = await list(this.querInfo)
      console.log(data)
      this.counts = data.counts
      this.dataList = data.items
    },
    handleCurrentChange(val) {
      this.querInfo.page = val
      this.subject_list()
    },
    handleSizeChange(newpage) {
      this.querInfo.pagesize = newpage
      this.subject_list()
    },

    // 添加学科
    async add_subjects() {
      // 隐藏弹框
      this.dialogVisible = false

      // 学科添加
      const red = await add({
        subjectName: this.ruleForm.name,
        isFrontDisplay: this.value
      })
      console.log(red)
      if (red.status !== 200) {
        return this.$message.error('添加学科失败')
      } else {
        this.$message.success('添加学科成功')
        // 添加成功刷新页面
        this.subject_list()
      }
    },
    // 搜索关键字
    subjects_search() {
      this.subject_list()
    },
    // 清除搜索框
    subjects_clear() {
      this.querInfo.subjectName = ''
      this.subject_list()
    },
    // 修改学科
    async subjectsAmend(row) {
      // 让弹框显示
      this.amendSubjects = true
      this.aa = row
    },
    async amend_data() {
      await update(this.aa)
      this.amendSubjects = false
    },
    // 删除学科
    open(item) {
      this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(item.id)
        await remove({
          id: item.id
        })
        this.subject_list()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    // 路由
    onClassify(params) {
      this.$router.push({
        path: '/subjects/directorys',
        query: {
          id: params.id,
          name: params.subjectName
        }
      })
    },
    ontag(params) {
      this.$router.push({
        path: '/subjects/tags',
        query: {
          id: params.id,
          name: params.subjectName
        }
      })
    }
  }
}
</script>

<style>
/* 输入框 */
.el-input--medium .el-input__inner {
  height: 32px;
  line-height: 32px;
}
.Contents-input {
  width: 188px;
}
/* 普通按钮 */
.Contents-input-button {
  margin-left: 15px;
}
/* 添加按钮 */

.el_form_data {
  position: relative;
}
.Contents-button {
  position: absolute;
  left: 830px;
  top: 3px;
  float: right;
  margin-left: 1000px;
}
/* 分页 */
.el-pagination {
  float: right;
}
/* 添加学科表单 */
.add-subjects-input {
  width: 280px;
  display: inline-block;
  margin-left: 5px;
}
.el-dialog__body {
  padding: 30px 20px;
}
.el-switch__label span {
  color: #606266;
  font-weight: bold;
}
.dialog-footer {
  margin-left: 200px;
}
.el-alert {
  margin: 10px 0;
}
/* 操作 */
.subjects_operation {
  display: flex;
  justify-content: center;
}
</style>
